<template>
  <div class="active-conent-wrapper">
    <div class="image-content-wrapper">
      <div class="image-wrapper">
        <span class="awarded" v-if="active.jp_type==5">已开奖</span>
        <span class="passaward" v-if="active.jp_type==6">已流拍</span>
        <img class="image" :src="active.jp_img">
      </div>
      <div class="active-content-2to4" v-if="notAwardOrPassAward(active.jp_type)">
        <div class="name">
          {{active.product_name}}
        </div>
        <div class="award-count-wrapper">
          获奖名额: <span class="award-count">{{active.award_users}}</span>
        </div>
        <div class="down-time-wrapper">
          <span class="pre" v-if="currentCountDownPre(active.jp_type, active.is_join)">{{currentCountDownPre(active.jp_type, active.is_join)}}</span>
          <count-down class="content" :deadLine="active.left_second" :callback="countDownFinished"></count-down>
        </div>
        <div class="progress-wrapper">
          <m-progress :max="active.total_zhushu" :current="active.now_zhushu" ></m-progress>
        </div>
        <div class="join-status-wrapper">
          <div class="joined-count-wrapper">
            <div class="joined-count">{{active.now_zhushu}}</div>
            <div class="joined-count-title">(已参与)</div>
          </div>
          <div class="total-count-wrapper">
            <div class="total-count">{{active.total_zhushu}}</div>
            <div class="total-count-title">(总需人次)</div>
          </div>
          <div class="need-count-wrapper">
            <div class="total-count">{{active.total_zhushu - active.now_zhushu}}</div>
            <div class="total-count-title">(剩余)</div>
          </div>
        </div>
      </div>
      <div class="active-content-awarded" v-if="active.jp_type == 5">
        <div class="name">
          {{active.product_name}}
        </div>
        <div class="total-count">
          总需人次: {{active.total_zhushu}}
        </div>
        <div class="award-name-wrapper">
          获奖者: <span class="award-name">{{active.award_person}}</span>
        </div>
        <div class="award-code-wrapper">
          中奖号码: <span class="award-code">{{active.award_code}}</span>
        </div>
        <div class="award-time">
          开奖时间:{{active.pub_time}}
        </div>
      </div>
      <div class="active-content-passaward" v-if="active.jp_type == 6">
        <div class="name">
          {{active.product_name}}
        </div>
        <div class="award-count-wrapper">
          获奖名额: <span class="award-count">{{active.award_users}}</span>
        </div>
        <div class="total-count">
          总需人次: {{active.total_zhushu}}
        </div>
        <div class="need-count">
          参与人次: {{active.now_zhushu}}
        </div>
        <div class="award-time">
          截止时间: {{active.active_end}}
        </div>
      </div>
    </div>
    <div class="bottom-btn-wrapper" v-show="notAwardOrPassAward(active.jp_type)">
      <div class="status-pre-img" v-if="showStatusPreImg(active.jp_type, active.is_join)" :class="currentPreImgClass(active.jp_type, active.is_join)"></div>
      <span class="join" :class="[currentBtnClass(active.jp_type, active.is_join),{androidVC: this.wccconfig.isAndroid}]" @click.stop.prevent="clickBottomBtn(active.jp_type, active.is_join)">{{currentBtnContent(active.jp_type, active.is_join, active.single_point)}} </span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import mProgress from '../../components/progress/progress.vue'
  import CountDown from '../../components/countdown/CountDownNew.vue'

    export default {
      data() {
        return {
        }
      },
      props: {
        active: {
          type: Object
        },
        islogin: {
          type: String
        }
      },
      created() {
      },
      methods: {
        countDownFinished() {
          this.$emit("listenToRefresh")
        },
        currentPreImgClass(type, isjoin) {
          if (type === '3') {
            return 'unstart'
          } else if (type === '2' &&　isjoin === '0') {
            return 'unjoin'
          }
          if (isjoin === '1') {
            return 'joined'
          }
        },
        showStatusPreImg(type, isjoin) {
          /*if (type === '3') {
            return true
          } else if (type === '2' &&　isjoin === '0') {
            return true
          }
          if (isjoin === '1') {
            return true
          }*/
          return false
        },
        currentBtnClass(type, isjoin) {
          if (type == 2) {
            if (isjoin == 0) {
              return 'orange'
            } else {
              return 'blue'
            }
          } else if (type == 3) {
            return 'gray'
          } else if (type == 4) {
            return 'gray'
          }
        },
        currentBtnContent(type, isjoin, point) {
          if (type == 2) {
            if (isjoin == 0) {
              return point + '积分参与'
            } else {
              return '已参加 查看进度'
            }
          } else if (type == 3) {
            return point + '积分参与'
          } else if (type == 4) {
              if (this.active.left_second <= 0) {
                return '正在开奖'
              } else {
                return '等待开奖'
              }
          }
        },
        currentCountDownPre(type, isjoin) {
          if (type === '2') {
            return '倒计时'
          } else if (type === '3') {
            return '开抢倒计时'
          } else if (type === '4') {
            return '开奖倒计时'
          }
        },
        notAwardOrPassAward(type) {
          if (type == 5 || type ==6) {
            return false
          } else {
            return true
          }
        },
        needShowCountDown(type) {
          if (type == 5 || type ==6) {
            return false
          } else {
            return true
          }
        },
        clickBottomBtn(type, isJoined) {
          if (this.wccconfig.isApp) {
            if (type == 2 && isJoined == 0 ) {
              if (this.islogin == 0) {
                let vue = this
                if (this.utils.supportWccia()) {
                  this.wccia.checkLogin(function(urid){
                    vue.$emit("listenToRefresh", urid)
                  })
                  this.$emit("stopDanMu")
                } else {
                  vue.$emit("showDialogByType", '5')
                }
                return
              } else {
                //参加活动
                this.joinActive();
              }
            } else {
              this.utils.doRouter(this, '/detail',{'jpid':this.active.jpid, 'h5title': '积分夺宝'})
              this.$emit("stopDanMu")
            }
          } else {
            if (type === '2' || type === '3') {
              this.utils.doRouter(this, '/detail',{'jpid':this.active.jpid, 'h5title': '积分夺宝'})
              this.$emit("stopDanMu")
            }
          }
        },
        joinActive() {
          let loginStatus = this.islogin ? 'login' : 'notlogin'
          this.utils.doClickTJ('click', 'pointraised','startbtn', loginStatus, '')
          let url = '/Jfproduct/order' + this.utils.makeSign(this.wccconfig.urlParams + "&jpid=" + this.active.jpid)
          let vue = this
          this.$http.get(this.wccconfig.buildUrl(url)).then((response => {
            response = response.body;
            if (response) {
              let shareUrl = location.href.substring(0, location.href.indexOf("?") + 1).replace("index", "detail") + "jpid=" + vue.active.jpid
              vue.$emit("showDialogByType", response.errno, vue.active.share_title, vue.active.share_content, shareUrl, vue.active.share_img)
            }
          }));
        }
      },
      components: {
        mProgress, CountDown
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .active-conent-wrapper
    display block
    padding .2rem .2rem .1rem .2rem
    .image-content-wrapper
      display flex
      .image-wrapper
        display block
        flex 0 0 2.4rem
        margin 0 0 0 .05rem
        .image
          width 2.4rem
          height 2.4 rem
          border-radius .05rem
          border 1px solid #d2d2d2
        .passaward
          position absolute
          text-align center
          line-height .3rem
          height .3rem
          background #d2d2d2
          padding .08rem .12rem .08rem .12rem
          background-size .84rem .3rem
          z-index 1
          color #fff
          font-size .26rem
        .awarded
          position absolute
          text-align center
          line-height .3rem
          height .3rem
          background #e53935
          padding .08rem .12rem .08rem .12rem
          background-size .84rem .3rem
          z-index 1
          color #fff
          font-size .26rem
      .active-content-2to4
        display block
        flex 1
        vertical-align top
        font-size 0
        margin-left .14rem
        .name
          text-align left
          font-size .3rem
          line-height .34rem
          color #000000
          font-family STXihei
          overflow hidden
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
          word-break break-all
        .award-count-wrapper
          text-align left
          font-size .26rem
          margin-top .2rem
          color #3c3c3c
          font-family STXihei
          .award-count
            color #da2828
        .down-time-wrapper
          text-align left
          margin-top .12rem
          height .38rem
          line-height .38rem
          .pre
            vertical-align top
            display inline-block
            font-size .26rem
            color #3c3c3c
            font-family STXihei
          .content
            vertical-align top
            margin-left .12rem
            display inline-block
            font-size .26rem
        .progress-wrapper
          font-size .18rem
          margin .22rem .35rem 0 0
        .join-status-wrapper
          display flex
          justify-content : space-between
          margin .13rem .35rem 0 .05rem
          font-size .22rem
          font-family STXihei
          color #3c3c3c
          .joined-count-wrapper, .total-count-wrapper, .need-count-wrapper
            display block
      .active-content-awarded
        display block
        flex 1
        vertical-align top
        margin-left .14rem
        font-size .26rem
        .name
          text-align left
          font-size .3rem
          color #000000
          font-family STXihei
        .total-count
          text-align left
          font-size .26rem
          margin-top .2rem
          color #3c3c3c
          font-family STXihei
        .award-name-wrapper
          text-align left
          font-size .26rem
          margin-top .2rem
          color #3c3c3c
          font-family STXihei
          .award-name
            color #da2828
        .award-code-wrapper
          text-align left
          font-size .26rem
          margin-top .2rem
          color #3c3c3c
          font-family STXihei
          .award-code
            color #da2828
        .award-time
          text-align left
          font-size .26rem
          margin-top .2rem
          color #3c3c3c
          font-family STXihei
          margin-bottom .1rem
      .active-content-passaward
        display block
        flex 1
        vertical-align top
        margin-left .14rem
        color #482f35
        font-size .26rem
        .name
          text-align left
          font-size .3rem
          color #000000
          font-family STXihei
        .total-count, .award-count-wrapper, .total-count, .need-count, .award-time
          text-align left
          font-size .26rem
          margin-top .2rem
          color #3c3c3c
          font-family STXihei
        .award-time
          margin-bottom .1rem
    .bottom-btn-wrapper
      height .76rem
      line-height .76rem
      margin  .2rem .28rem 0 0
      background-repeat no-repeat
      display block
      .join
        position relative
        display inline-block
        float right
        height .36rem
        line-height .36rem
        text-align center
        font-size .3rem
        color #fff
        font-family STXihei
        min-width 2rem
        padding .2rem .15rem .2rem .15rem
        border-radius .1rem
        &.androidVC
          padding .25rem .15rem .2rem .15rem
        &.orange
          background #ff6600
        &.blue
          background #0d8ef1
        &.gray
          background #bfbfbf
      .status-pre-img
        display inline-block
        float left
        &.unstart
          width 3.43rem
          height .8rem
          background-size 3.43rem .8rem
          background-image url('./img/icon_unstart.png')
        &.unjoin
          width 3.66rem
          height .8rem
          background-size 3.66rem .8rem
          background-image url('./img/icon_unjoin.png')
        &.joined
          width 3.56rem
          height .8rem
          background-size 3.56rem .8rem
          background-image url('./img/icon_joined.png')
</style>
